<template>
  <div >
    <div v-if="messageStatus">
        <n-card title="商品列表" header>
        <div class="header">
            <div>
            <NButton type="primary" @click="onClickAdd">
                添加商品
            </NButton>
            </div>
            <div>
            <n-input-group>
                <n-input multiple v-model:value="params.keyword" clearable placeholder="请输入插件关键词" :style="{ width: '100%' }" />
                <n-button @click="List" type="primary" ghost>
                    搜索
                </n-button>
                </n-input-group>
            </div>
        </div>
        </n-card>
        <div class="box">
        <!-- 数据表 -->
        <div class="table-box">
            <div >
            <n-data-table
                striped 
                :loading="messageParams.loading"
                ref="table"
                :columns="columns"
                :data="data"
            />
            </div>
            <div class="pagination">
                <div>共{{pagination.total}}条数据</div>
                <div>
                <n-pagination
                v-model:page="params.pageNum"
                v-model:page-size="params.pageSize"
                :page-count="setPagination(pagination.total,params.pageSize)"
                show-size-picker
                :page-sizes="pageSizes"
                :on-update:page="pageNext"
                :on-update:page-size="sizeNext"
                />
                </div>
            </div>
        
        </div> 
            

        </div>
    </div>

    <div v-else class="Message">
        <n-result
            status="403"
            title="403 禁止访问"
            description="总有些门是对你关闭的"
        >
            <template #footer>
            <n-button @click="goTo('/pluginAdmin/all')">去充钱</n-button>
            </template>
        </n-result>
    </div>

    <n-drawer
      v-model:show="showModal"
      :default-width="900"
      :default-height="600"
      :placement="'right'"
      resizable
    >
      <n-drawer-content :title="popTitle">
        <div class="box-modal">
         <n-form
          ref="formRef"
          :model="formValue"
          :rules="rules"
          class="formClass"
        >
          <n-form-item label="连锁店铺" >
             <n-select
                v-model:value="formValue.businessId"
                  :style="{ width: '400px' }" 
                  filterable 
                  :multiple="popTitle=='编辑'?false:true"
                  placeholder="请选择店铺"
                  :options="storeOptions"
                  clearable
                />
          </n-form-item>
           <n-form-item label="商品分类" >
             <n-select
                  v-model:value="formValue.categoryId"
                    :style="{ width: '400px' }" 
                    filterable 
                    placeholder="请选择商品分类"
                    :options="categoryOptions"
                    clearable
                  />
          </n-form-item>
          <n-form-item label="商品名称" path="goodsName">
            <n-input :style="{ width: '400px' }"  v-model:value="formValue.goodsName" placeholder="请输入商品名称" />
          </n-form-item>
           <n-form-item label="副标题" path="subtitle">
            <n-input :style="{ width: '400px' }"  v-model:value="formValue.subtitle" placeholder="请输入副标题" />
          </n-form-item>
          <n-form-item  label="商品价格" path="goodsPrice">
            <n-input :style="{ width: '400px' }"  v-model:value="formValue.goodsPrice" placeholder="请输入商品价格" />
          </n-form-item>
          <n-form-item label="划线价格" path="scribePrice">
            <n-input :style="{ width: '400px' }"  v-model:value="formValue.scribePrice" placeholder="请输入划线价格" />
          </n-form-item>
          <n-form-item  label="会员价格" path="memberPrice">
            <n-input :style="{ width: '400px' }"  v-model:value="formValue.memberPrice" placeholder="请输入会员价格" />
          </n-form-item>
          <n-form-item label="配送方式" >
            <n-select v-model:value="formValue.goodsType"
              :style="{ width: '400px' }" 
              filterable 
              placeholder="请选择配送方式"
              :options="peisonOptions"
              clearable
            />
          </n-form-item>
           <n-form-item label="库存" path="stockNum">
            <n-input :style="{ width: '400px' }"   v-model:value="formValue.stockNum" placeholder="请输入库存" />
          </n-form-item>
          <n-form-item label="赠送积分" path="rewardIntegral">
            <n-input :style="{ width: '400px' }"   v-model:value="formValue.rewardIntegral" placeholder="请输入赠送积分" />
          </n-form-item>

           <n-form-item label="预览图" >
              <div @click="changeImage('预览图')" v-if="formValue.previewUrl" style="height:135px;width:100px;overflow: hidden;display: flex;padding:12px;
                justify-content: center; align-items: center;">
                <n-image
                :preview-disabled="true"
                style="object-fit: contain;display: flex;
                    justify-content: center;
                    align-items: center;"
                :src="Https()+formValue.previewUrl"/>
            </div>
             <div v-else @click="changeImage('预览图')" class="imageUpload">
              <n-icon size="24" color="rgb(49, 108, 114)">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8V2.5z" fill="currentColor"></path></g></svg>
              </n-icon>
            </div>
          </n-form-item>
           <n-form-item label="轮播图" >
               
                <n-carousel style="width:220px;height:120px" draggable :interval="1000" centered-slides loop v-if="formValue.rotationImgsJson.length"  autoplay>
                   <n-carousel-item v-for="(item,index) in formValue.rotationImgsJson" style="width: 100%">
                    <n-image
                :preview-disabled="true"
                style="object-fit: contain;display: flex;
                    justify-content: center;
                    align-items: center;"
                :src="Https()+item"/>
                  </n-carousel-item>
                </n-carousel>
                <div @click="changeImage('轮播图')" v-if="formValue.rotationImgsJson.length" style="height:135px;width:100px;overflow: hidden;display: flex;padding:12px;
                  justify-content: center; align-items: center;">
                   <n-button @click="List" type="primary" ghost>
                      重新上传
                  </n-button>
                </div>
             <div v-else @click="changeImage('轮播图')" class="imageUpload">
              <n-icon size="24" color="rgb(49, 108, 114)">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8V2.5z" fill="currentColor"></path></g></svg>
              </n-icon>
            </div>
          </n-form-item>

          <n-form-item label="富文本" path="contents">
              <n-button @click="EditorFun">编写富文本</n-button>
          </n-form-item>
          

          <n-form-item label="商品规格" path="status">
             <n-button @click="EditorFun">设置规格</n-button>
          </n-form-item>

          <n-form-item label="商品推荐" path="extJson">
            <n-switch v-model:value="formValue.extJson">
              <template #checked>
                推荐
              </template>
              <template #unchecked>
                不推荐
            </template>
            </n-switch>
          </n-form-item>

          <n-form-item label="商品状态" path="goodsStatus">
            <n-switch v-model:value="formValue.goodsStatus">
              <template #checked>
                上架
              </template>
              <template #unchecked>
                下架
            </template>
            </n-switch>
          </n-form-item>

          <div style="height:20px"></div>
        </n-form>
       
        <div class="goodsFloot">
         
          <div class="Editorfloot">
            <n-button @click="showModal=false">取消</n-button>
            <n-button @click="submitCallback" type="primary">
              提交
            </n-button>
          </div>
        </div>
      </div>
      </n-drawer-content>
    </n-drawer>

    <n-drawer
      v-model:show="EditorShow"
      :default-width="1280"
      :default-height="680"
      :placement="'center'"
      resizable
    >
      <n-drawer-content title="富文本">
          <div class="Editorbox">
            <div :class="'pcEditorClass'">
              <Editor :value="formValue.contents" @updateValue="getMsg" />
            </div>
             <div v-if="EditorClass != 'pcEditorClass'" style=" border: 1px solid #ccc;border-radius: 16px;
              padding: 16px;" :class="EditorClass" v-html="formValue.contents">
               
            </div>
          </div>
          
          <div class="Editorfloot">
            <n-button @click="EditorShow=false">取消</n-button>
             <n-button type="info" @click="changeEditorClass">
              {{EditorClass=='pcEditorClass'?'切换小程序格式':'切换成pc格式'}}
            </n-button>
            <n-button @click="EditorShow=false" type="primary">
              确定
            </n-button>
          </div>
      </n-drawer-content>
    </n-drawer>


    
  <n-modal  v-model:show="uploadShow"
      :mask-closable="false"
      preset="dialog"
      style="width: 1000px;"
      :title="'文件管理'"
      content="你确认?"
      positive-text="确定"
      negative-text="关闭"      
      @positive-click="uploadShow=false"
      @negative-click="uploadShow=false"
      >
      <div class="box-upload">
         <Upload type="1" @selectImage="selectImageFun"/>
      </div>
  </n-modal>
  </div>
</template>

<script setup lang="ts">
import { NAvatar, NButton, NImage, NSwitch, NTag  } from 'naive-ui'
import type { FormInst } from 'naive-ui'
import { nextTick, onMounted, ref } from 'vue'
import Editor from '@/components/Editor/index.vue'
import Upload from "@/views/upload/index.vue"
import api from './api'
 
import { Https,setPagination } from "@/utils"
const router = useRouter()
const route = useRoute()
const pluginInfo = ref({})
const messageStatus = ref(false)
const EditorShow = ref(false)
const EditorClass = ref('pcEditorClass')
const emailForm = ref({
  test_msg: ''
})
const getMsg = (val) => {
  console.log(val)
  formValue.value.contents = val
}
const changeEditorClass = () => {
  if(EditorClass.value == 'pcEditorClass')
    EditorClass.value = 'xcxEditorClass'
  else
    EditorClass.value = 'pcEditorClass'
}
const uploadShow = ref(false);
onMounted(() => {
    console.log(route.query)
    // myPluin()
      storeList()
     categoryList();
     List();
     
})

const selectImageFun =(selectImageList) =>{
  if(typeImage.value == "预览图")
    formValue.value.previewUrl = selectImageList[0];  // 只获取第一张图
  else
    formValue.value.rotationImgsJson = selectImageList;  // 只获取第一张图
  uploadShow.value =false
} 

const pageSizes = [
  {
    label: '10 每页',
    value: 10
  },
  {
    label: '20 每页',
    value: 20
  },
  {
    label: '30 每页',
    value: 30
  },
  {
    label: '40 每页',
    value: 40
  }
]


const peisonOptions = ref([
  {
    label:'快递',
    value:1
  },
  {
    label:'自提',
    value:2
  },
  {
    label:'到店消费',
    value:3
  },
  {
    label:'快递、自提',
    value:4
  },
  {
    label:'全部支持',
    value:5
  },
])

const pagination = ref({
  total:10
})
const formRef = ref<FormInst | null>(null);

const showModal = ref(false);
const popTitle:any = ref('添加店铺');
const params = ref({
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  user_id:''
})

const formValue = ref({
  businessId:[],
  categoryId:[],
  extJson:true,
  status:true,
  goodsName:"",
  goodsSkuJson:"",
  goodsPrice:"",
  goodsStatus:true,
  goodsType:[],
  memberPrice:"",
  limitNum:"",
  packingFee:"",
  previewUrl:"",
  distributionFee:"",
  goodsBeginTime:"",
  goodsEndingTime:"",
  goodsDetails:"",
  goodsDetailsJson:"",
  rewardIntegral:"",
  rotationImgsJson:[],
  scribePrice:"",
  stockNum:"",
  contents:"",
  subtitle:"",
  keywords:"",
  effectDays:"",
  goodsViewCount:""
})

const rules = {
  businessId: {
      type: "array",
      required: false,
      trigger: ["blur", "change"],
      message: '请选择店铺'
  },
  categoryId: {
      type: "array",
      required: false,
      trigger: ["blur", "change"],
      message: '请选择商品分类'
  },
  goodsName: {
      required: true,
      trigger: ['blur'],
      message: '请输入商品名称'
  },
  subtitle: {
      required: true,
      trigger: ['blur'],
      message: '请输入商品副标题'
  },
  goodsPrice: {
      required: true,
      trigger: ['blur'],
      message: '请输入商品价格'
  },
  scribePrice: {
      required: false,
      trigger: ['blur'],
      message: '请输入商品划线价格'
  },
  memberPrice: {
      required: false,
      trigger: ['blur'],
      message: '请输入商品会员价格'
  },
  goodsType: {
    
      type: "array",
      required: false,
      trigger: ["blur", "change"],
      message: '请选择商品配送方式'
  },
  stockNum: {
      required: true,
      trigger: ['blur'],
      message: '请输入商品库存'
  },
  rewardIntegral: {
      required: false,
      trigger: ['blur'],
      message: '请输入商品赠送积分'
  },
  previewUrl: {
      required: false,
      trigger: ['blur','image'],
      message: '请上传商品预览封面'
  },
  rotationImgsJson: {
      required: false,
      trigger: ['blur'],
      message: '请上传商品轮播图'
  },
  contents: {
      required: true,
      trigger: ['blur'],
      message: '请填写富文本'
  },
  
}

const columns = [
  {
    title: '店铺ID',
    key: 'businessId',
    ellipsis: {
      tooltip: true
    },
    render: (item) => setStore(item)
 
  },
  {
    title: '店铺名称',
    key: 'businessId',
    // width: 200,
    ellipsis: {
      tooltip: true
    },
    render: (item) => setStoreName(item)
  },
  {
    title: '商品分类',
    key: 'categoryId',
    // width: 200,
    ellipsis: {
      tooltip: true
    },
    render: (item) => setCategory(item)
  },
   {
    title: '商品名称',
    key: 'goodsName',
    // width: 200,
    ellipsis: {
      tooltip: true
    },
   
    
  },
  {
    title: '商品封面',
    key: 'previewUrl',
    // width: 200,
    ellipsis: {
      tooltip: true
    },
    render: (item) => setImage(item)
    
  },
 
  {
    title: '商品价格',
    key: 'goodsPrice',
    // width: 200,
    ellipsis: {
      tooltip: true
    },
 
  },
  {
    title: '划线价格',
    key: 'scribePrice',
    // width: 200,
    ellipsis: {
      tooltip: true
    },
 
  },
  {
    title: '商品预览',
    key: 'goodsViewCount',
    // width: 200,
    ellipsis: {
      tooltip: true
    },
     
  },
  {
    title: '商品库存',
    key: 'stockNum',
    // width: 200,
    ellipsis: {
      tooltip: true
    },
     
  },
   {
    title: '限购',
    key: 'limitNum',
    // width: 200,
    ellipsis: {
      tooltip: true
    },
     
  },
   {
    title: '送货方式',
    key: 'goodsType',
    // width: 200,
    ellipsis: {
      tooltip: true
    },
    render: (item) => goodsType(item)
  },
  {
    title: '配送费用',
    key: 'distributionFee',
    // width: 200,
    ellipsis: {
      tooltip: true
    },
   
  },

  {
    title: '状态',
    key: 'status',
    ellipsis: {
      tooltip: true
    },
    render: (item) => setStatus(item)
  },
  {
    title: '创建时间',
    key: 'ctime',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '操作',
    key: 'actions',
    width: 180,
    align: 'right',
    fixed: 'right',
    hideInExcel: true,
  
    render(row) {
      return [
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            secondary: true,
            onClick: () => handleOpenRolesSet(row),
          },
          {
            default: () => '编辑',
            icon: () => h('i', { class: 'i-fe:database' }),
          },
        ),

        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            style: 'margin-left: 12px;',
            onClick: () => handleDelete(row.id),
          },
          {
            default: () => '删除',
            icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
          },
        ),
      ]
    },
  },

]

function setStore(item){
   
    try{
      return item.business.value
    }catch(e){
        if(item.otherConfigJson){
            return '代码报错'
            console.log(item.otherConfigJson)
        }
    }
    
}

function setStoreName(item){
    // console.log(JSON.parse(item.businessId),type)
    try{
        if(item.business.label)
        return item.business.label
        else
          return '全部店铺'
    }catch(e){
        if(item.otherConfigJson){
            return '代码报错'
            console.log(item.otherConfigJson)
        }
    }
    
}
function setCategory(item){
    // console.log(JSON.parse(item.businessId),type)
    try{
        if(item.category.label)
        return item.category.label
        else
        return '无'
    }catch(e){
        if(item.otherConfigJson){
            return '代码报错'
            console.log(item.otherConfigJson)
        }
    }
    
}


function setImage(item){
    try{
       
          return h(NImage, {
            width: 60,
            src:Https() + item.previewUrl || 'https://q6.itc.cn/q_70/images03/20240319/5567d75589bd46439af8e835beeac44f.png',
        })
             
    
    }catch(e){
        if(item.otherConfigJson){
            console.log(item.otherConfigJson)
        }
    }
    
}

function goodsType(item){
    // console.log(JSON.parse(item.businessId),type)
    try{
        if(item.goodsType){
            if(item.goodsType == 1)
              return '快递'
            if(item.goodsType == 2)
              return '自提'
            if(item.goodsType == 3)
              return '到店消费'
            if(item.goodsType == 4)
              return '快递丶自提'
            if(item.goodsType == 5)
              return '全部支持'
        }else{
            return '全部店铺'
        }
    }catch(e){
        if(item.otherConfigJson){
            return '代码报错'
            console.log(item.otherConfigJson)
        }
    }
    
}

function setStatus(item){
    // console.log(item)
    if(item.goodsStatus)
        return h('span', { style: { color: 'green' } },'启用')
    else
        return h('span', { style: { color: 'red' } },'禁用')
}
const data: any = ref([])

async function handleDelete(id){
  const res: any = await api.DeleteApi({
    id:id
  })
  if(res.code == 200){
    List();
    $message.success('删除成功!')
  }else{
    
  }

}
const messageParams: any = ref({
  show: false,
  status: '403',
  loading: true,
})

const handleOpenRolesSet =(item) =>{
    console.log(item)
    formValue.value = item;
    if(formValue.value.businessId)
      formValue.value.businessId = item.businessId
    else
      formValue.value.businessId = ''
    if(formValue.value.categoryId == '0' || formValue.value.categoryId == 0 ||  formValue.value.categoryId == ['0'] ||  formValue.value.categoryId == [])
      formValue.value.categoryId = ''
    else
      formValue.value.categoryId = Number(formValue.value.categoryId)
    if(formValue.value.rotationImgsJson.length > 10)
      formValue.value.rotationImgsJson = item.rotationImgsJson.split(',')
    else{
      if(formValue.value.rotationImgsJson.length > 0){
         
      }else{
        formValue.value.rotationImgsJson = []
      }
    }
      

    formValue.value.goodsType = Number(formValue.value.goodsType)

    // console.log(formValue.value)
    // if(item.otherConfigJson)
    //     formValue.value.otherConfigJson = JSON.parse(item.otherConfigJson)
    popTitle.value = '编辑';
    showModal.value = true;
} 

function handlePreview1(file: UploadFileInfo) {
  const { url } = file
  formValue.value.previewUrl = url as string
}
function handlePreview2(file: UploadFileInfo) {
  const { url } = file
  formValue.value.rotationImgsJson = url as string
}

const EditorFun =(item) =>{
  
  EditorShow.value = true;
}
 
async function List() {
  try {
    messageParams.value.loading = true
    messageStatus.value = true
    params.value.user_id = route.query.user_id
    params.value.store_id = route.query.store_id
    const res: any = await api.ListApi(params.value)
    if (res.code == 200) {
      setTimeout(()=>{
        data.value = res.data.list
        for (let index1 = 0; index1 < data.value.length; index1++) {
          for (let index = 0; index < storeOptions.value.length; index++) { 
          
            if(storeOptions.value[index].value == data.value[index1].businessId){
              data.value[index1]['business'] = storeOptions.value[index];
              continue;
            }
          }
        }

        for (let index1 = 0; index1 < data.value.length; index1++) {
          for (let index = 0; index < categoryOptions.value.length; index++) { 
            
            if(categoryOptions.value[index].value == data.value[index1].categoryId){
              data.value[index1]['category'] = categoryOptions.value[index];
              continue;
            }
          }
        }
      
        messageParams.value.loading = false
        pagination.value.total = res.data.total
        
      },2000)

    }
    else {
      messageParams.value.show = false
      messageParams.value.status = '500'
    }
  }
  catch (error) {
    console.error(error)
  }
}
const storeOptions = ref([])
async function storeList() {
    const res: any = await api.storeListApi({
      pageNum:1,
      pageSize:300,
      user_id:route.query.user_id
    })
    if (res.code == 200) {
      storeOptions.value = res.data.list.map(item=>{
        return{
          label:item.businessName,
          value:item.businessId
        }
      })
    }
    
}
const categoryOptions = ref([])
async function categoryList() {
 
    const res: any = await api.categoryListApi({
      pageNum:1,
      pageSize:500,
      user_id:route.query.user_id
    })
    if (res.code == 200) {
      categoryOptions.value = res.data.list.map(item=>{
        return{
          label:item.categoryName,
          value:item.id
        }
      })
    }
    
}
function onClickAdd(){
  formValue.value = {
    businessId:[],
    categoryId:[],
    extJson:true,
    status:true,
    goodsName:"",
    goodsSkuJson:"",
    goodsPrice:"",
    goodsStatus:true,
    goodsType:[],
    memberPrice:"",
    limitNum:"",
    packingFee:"",
    previewUrl:"",
    distributionFee:"",
    goodsBeginTime:"",
    goodsEndingTime:"",
    goodsDetails:"",
    goodsDetailsJson:"",
    rewardIntegral:"",
    rotationImgsJson:[],
    scribePrice:"",
    stockNum:"",
    contents:"",
    subtitle:"",
    keywords:"",
    effectDays:"",
    goodsViewCount:""
  }
  popTitle.value = '添加商品'
  showModal.value = true
}
async function submitCallback() { 
  messageParams.value.loading = true
  formRef.value?.validate((errors) => {
      if (!errors) {
      formValue.value.user_id = route.query.user_id
      if(popTitle.value == '添加商品')
          AddFun();
      else
          EditFun();
      }
      else {  
      showModal.value = true
      return 
  
      }
  })
}

async function AddFun(){
    const newData =  formValue.value
    newData.rotationImgsJson = String(newData.rotationImgsJson)
    messageParams.value.loading = true
    // newData.otherConfigJson = JSON.stringify(formValue.value.otherConfigJson)
    const res: any = await api.AddApi(newData)
    if(res.code == 200){
        List();
        formValue.value = {
          businessId:[],
          categoryId:[],
          extJson:true,
          status:true,
          goodsName:"",
          goodsSkuJson:"",
          goodsPrice:"",
          goodsStatus:true,
          goodsType:[],
          memberPrice:"",
          limitNum:"",
          packingFee:"",
          previewUrl:[],
          distributionFee:"",
          goodsBeginTime:"",
          goodsEndingTime:"",
          goodsDetails:"",
          goodsDetailsJson:"",
          rewardIntegral:"",
          rotationImgsJson:[],
          scribePrice:"",
          stockNum:"",
          contents:"",
          subtitle:"",
          keywords:"",
          effectDays:"",
          goodsViewCount:""
        }
        showModal.value = false
        $message.success('添加成功!')
    }else{
        $message.error(res.message)
    }
}

async function EditFun(){
  const newData =  formValue.value
  newData.rotationImgsJson = String(newData.rotationImgsJson)
  messageParams.value.loading = true
  const res: any = await api.EditApi(formValue.value)
  if(res.code == 200){
    List();
    showModal.value = false
    $message.success('编辑成功!')
  }else{
    $message.error(res.message)
  }
}

function pageNext(page){
  params.value.pageNum = page
  List();
}
function sizeNext(size){
    params.value.pageNum = 1
    params.value.pageSize = size
    List();
}


function cancelCallback() {
  List();
  showModal.value = false
}
const typeImage = ref('')
function changeImage(type) {
  typeImage.value = type
  uploadShow.value = true
}

function goTo(path){
    router.push(path)
}
</script>

<style scoped>
 .box {
    height: 75vh;
    overflow-y: auto;
}
.table-box{
  padding: 20px;
}
.box-modal{
  width: 850px;
  height: 620px;
  position: relative;
  /* width: 400px; */
  /* height: 350px; */

}
.pagination{
  display: flex;
  justify-content: right;
  /* height: 60px; */
  gap: 10px;
  align-items: center;
  position: relative;
  top: 20px;
}
.header{
  display: flex;gap: 10px;
}
.Message{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 200px;
}

.formClass{
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 600px;
  overflow-y: scroll;
}
.EditorClass{
  display: flex;
  justify-content: center;
  align-items: center;
}
.pcEditorClass{
  width: 1100px;
  height: 500px;
  /* height: 650px; */
  overflow-y: auto;
}
.Editorfloot{
  border-top: 1px solid #ccc;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 20px;
  justify-content: center;
  padding-top: 25px;
  margin-top:25px;
}

.xcxEditorClass{
  height: 500px;
  width: 320px;
  overflow-y: auto;
}
.xcxEditorClass::-webkit-scrollbar {
  display: block;
}
.xcxEditorClass.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.Editorbox{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
 
}
.goodsFloot{
  position: absolute;
  width: 100%;
  bottom: 0px;
  background: white;
}
.imageUpload{
  width:100px;
  height:100px;
  border:1px solid #eee;
  display: flex;
  justify-content: center;
  border-radius: 6px;
  align-items: center;
}
.imageUpload:hover{
  border:1px solid rgb(49, 108, 114);
}
</style>
